<template>
  <view class="multi-progress">
    <!-- 进度条标题 -->
    <view class="progress-header">
      <text class="progress-title">{{ title }}</text>
      <text class="progress-value">{{ totalValue }}/{{ targetValue }}{{ unit }}</text>
    </view>

    <!-- 进度条容器 -->
    <view class="progress-bar-container">
      <!-- 基础进度轨道（固定100%宽度） -->
      <view class="progress-track">
        <!-- 多个子进度段（按目标比例显示） -->
        <view 
          class="progress-segment" 
          v-for="(item, index) in progressList" 
          :key="index"
          :style="{ 
            width: `${getSegmentWidth(item)}%`,
            backgroundColor: item.color 
          }"
          @click="handleSegmentClick(item, index)"
        ></view>
      </view>

      <!-- 超额进度轨道（仅总进度超过目标时显示） -->
      <view 
        class="excess-track" 
        v-if="totalValue > targetValue"
        :style="{ 
          width: `${getExcessWidth()}%` 
        }"
        @click="handleExcessClick"
      >
        <view class="excess-segment"></view>
      </view>
    </view>

  
    <!-- 详情弹窗-->
    <uni-popup 
      ref="segmentPopup" 
      type="center" 
      :mask-click="false"
    >
      <view class="popup-content">
        <view class="popup-header" :style="{ backgroundColor: currentSegment.color }">
          <text class="popup-title">{{ currentSegment.name }}详情</text>
          <!-- <uni-icons 
            type="close" 
            color="#fff" 
            size="18" 
            class="close-icon"
            @click="closePopup"
          ></uni-icons> -->
        </view>
        <view class="popup-body">
          <view class="detail-item">
            <text class="detail-label">当前值：</text>
            <text class="detail-value">{{ currentSegment.value }}{{ unit }}</text>
          </view>
          <view class="detail-item">
            <text class="detail-label">占比：</text>
            <text class="detail-value">{{ Math.round((currentSegment.value / targetValue) * 100) }}%</text>
          </view>
          <view class="detail-item" v-if="currentSegment.detail">
            <text class="detail-label">说明：</text>
            <text class="detail-value">{{ currentSegment.detail }}</text>
          </view>
        </view>
        <view class="popup-footer">
          <button class="popup-btn" @click="closePopup">关闭</button>
        </view>
      </view>
    </uni-popup>

    <!-- 超额详情弹窗（同前版本） -->
    <uni-popup 
      ref="excessPopup" 
      type="center" 
      :mask-click="false"
    >
      <view class="popup-content">
        <view class="popup-header" style="backgroundColor: #e60012;">
          <text class="popup-title">超额完成详情</text>
          <!-- <uni-icons 
            type="close" 
            color="#fff" 
            size="18" 
            class="close-icon"
            @click="closeExcessPopup"
          ></uni-icons> -->
        </view>
        <view class="popup-body">
          <view class="detail-item">
            <text class="detail-label">目标值：</text>
            <text class="detail-value">{{ targetValue }}{{ unit }}</text>
          </view>
          <view class="detail-item">
            <text class="detail-label">实际值：</text>
            <text class="detail-value">{{ totalValue }}{{ unit }}</text>
          </view>
          <view class="detail-item">
            <text class="detail-label">超额值：</text>
            <text class="detail-value">{{ totalValue - targetValue }}{{ unit }}</text>
          </view>
        </view>
        <view class="popup-footer">
          <button class="popup-btn" @click="closeExcessPopup">关闭</button>
        </view>
      </view>
    </uni-popup>
  </view>
</template>

<script>
// import uniPopup from '@dcloudio/uni-ui/lib/uni-popup/uni-popup.vue'
// import uniIcons from '@dcloudio/uni-ui/lib/uni-icons/uni-icons.vue'

export default {
  name: "LimitedMultiProgress",
  // components: {
  //   uniPopup,
  //   uniIcons
  // },
  props: {
    title: {
      type: String,
      default: "任务进度"
    },
    targetValue: {
      type: String,
      default: 0
    },
    unit: {
      type: String,
      default: ""
    },
    progressList: {
      type: Array,
      default: () => [
        { name: "电话", value: 0, color: "#ffd100", detail: "电话预约客户" },
        { name: "短信", value: 0, color: "#ff7d00", detail: "短信预约客户" },
        { name: "微信", value: 0, color: "#ff4d00", detail: "微信预约客户" },
        { name: "其他", value: 0, color: "#e60012", detail: "其他渠道预约" }
      ]
    }
  },
  data() {
    return {
      currentSegment: {}
    };
  },
  computed: {
    // 计算总进度值
    totalValue() {
      return this.progressList.reduce((sum, item) => sum + item.value, 0);
    }
  },
  methods: {
    /**
     * 计算单个进度段的宽度百分比
     * 未完成目标时：按占目标值的比例计算（总和不超过100%）
     * 完成目标后：按实际占比计算（总和可能超过100%）
     */
    getSegmentWidth(item) {
      if (this.totalValue <= this.targetValue) {
        // 未完成目标：进度条总宽度严格限制在100%内
        return (item.value / this.targetValue) * 100;
      } else {
        // 已超额：按实际占比显示
        return (item.value / this.totalValue) * 100;
      }
    },

    /**
     * 计算超额进度条的宽度
     * 最大宽度为基础进度条的50%
     */
    getExcessWidth() {
      const excessRatio = (this.totalValue - this.targetValue) / this.targetValue;
      return Math.min(excessRatio * 100, 50); // 限制最大超额宽度为50%
    },

    // 点击进度段（同前版本）
    handleSegmentClick(item, index) {
      this.currentSegment = { ...item, index };
      this.$refs.segmentPopup.open();
      this.$emit('segment-click', {
        item: this.currentSegment,
        index,
        total: this.totalValue
      });
    },

    // 点击超额段（同前版本）
    handleExcessClick() {
      this.$refs.excessPopup.open();
      this.$emit('excess-click', {
        excessValue: this.totalValue - this.targetValue,
        total: this.totalValue
      });
    },

    closePopup() {
      this.$refs.segmentPopup.close();
    },

    closeExcessPopup() {
      this.$refs.excessPopup.close();
    }
  }
};
</script>

<style scoped>
/* 样式与前版本基本一致，关键调整如下 */
.progress-track {
  flex: 1; /* 基础进度条固定占满父容器（100%宽度） */
  height: 12px;
  background-color: #f2f2f2;
  border-radius: 6px; /* 未超额时两侧都有圆角 */
  display: flex;
  overflow: hidden;
}

/* 超额进度条仅在右侧延伸 */
.excess-track {
  height: 12px;
  background-color: #f8f8f8;
  border-radius: 0 6px 6px 0; /* 左侧无圆角，与基础进度条衔接 */
  overflow: hidden;
}

/* 其他样式保持不变 */
.multi-progress {
  width: 100%;
  padding:8rpx 12px;
  box-sizing: border-box;
  background-color: #fff;
  border-radius: 8px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
  margin-bottom: 24rpx;
}

.progress-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 12px;
}
.progress-title {
  font-size: 16px;
  color: #333;
  font-weight: 500;
}
.progress-value {
  font-size: 14px;
  color: #e60012;
  font-weight: bold;
}

.progress-bar-container {
  display: flex;
  height: 12px;
  margin-bottom: 12px;
}

.progress-segment {
  height: 100%;
  transition: all 0.3s ease;
  cursor: pointer;
}
.progress-segment:active {
  opacity: 0.8;
  transform: scaleY(1.2);
}

.excess-segment {
  width: 100%;
  height: 100%;
  background-color: #e60012;
}

.progress-labels {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}
.label-item {
  display: flex;
  align-items: center;
  font-size: 12px;
  cursor: pointer;
  padding: 2px 4px;
  border-radius: 4px;
  transition: background-color 0.2s;
}
.label-item:active {
  background-color: #f5f5f5;
}
.label-color {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  margin-right: 4px;
}
.label-text {
  color: #666;
}

/* 弹窗样式保持不变 */
.popup-content {
  width: 300rpx;
  max-width: 300px;
  background-color: #fff;
  border-radius: 12px;
  overflow: hidden;
}
.popup-header {
  padding: 14px 16px;
  color: #fff;
  position: relative;
}
.popup-title {
  font-size: 16px;
  font-weight: bold;
}
.close-icon {
  position: absolute;
  right: 16px;
  top: 50%;
  transform: translateY(-50%);
  cursor: pointer;
}
.popup-body {
  padding: 16px;
}
.detail-item {
  display: flex;
  margin-bottom: 12px;
}
.detail-label {
  width: 80px;
  color: #999;
  font-size: 14px;
}
.detail-value {
  flex: 1;
  color: #333;
  font-size: 14px;
}
.popup-footer {
  padding: 12px 16px;
  border-top: 1px solid #eee;
  display: flex;
  justify-content: center;
}
.popup-btn {
  width: 100%;
  height: 40px;
  background-color: #e60012;
  color: #fff;
  border-radius: 20px;
  font-size: 16px;
  line-height: 40px;
  padding: 0;
}
</style>